<template>
  <div v-loading.lock="loading" class="base-content">
    <div class="basic-info change-log-list">
      <el-form
        ref="queryForm"
        :inline="true"
        :model="queryForm"
        label-width="90px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="所属仓库" prop="storageId">
              <el-select
                v-model="queryForm.storageId"
                placeholder="请选择仓库"
                filterable
                clearable
              >
                <el-option
                  v-for="item in storageIdData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料名称" prop="productNum">
              <el-input
                v-model="queryForm.productNum"
                placeholder="物料编号/名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源单据" prop="orderNum">
              <el-input v-model="queryForm.orderNum" placeholder="来源单据" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="变更类型" prop="logType">
              <el-select
                v-model="queryForm.logType"
                placeholder="请选择变更类型"
                filterable
                clearable
              >
                <el-option
                  v-for="item in changeLogTypeOptions"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="变更时间" prop="createTimeArr">
              <el-date-picker
                v-model="queryForm.createTimeArr"
                type="daterange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人" prop="operatorName">
              <el-input
                v-model="queryForm.operatorName"
                placeholder="申请人/盘点人"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="出入库类型" prop="type">
              <el-select
                v-model="queryForm.type"
                placeholder="请选择出入库类型"
                filterable
                clearable
              >
                <el-option label="入库" :value="100" />
                <el-option label="出库" :value="200" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label=" ">
              <el-button type="primary" @click="onQuery">查询</el-button>
              <el-button @click="cancelForm">清空</el-button>
              <el-button
                icon="el-icon-document-copy"
                type="primary"
                @click="exportData()"
                >导出</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="仓库">
          <template slot-scope="scope">
            {{ scope.row.storageName }}
          </template>
        </el-table-column>
        <el-table-column label="物料编号">
          <template slot-scope="scope">
            {{ scope.row.productNum }}
          </template>
        </el-table-column>
        <el-table-column label="物料名称">
          <template slot-scope="scope">
            {{ scope.row.productName }}
          </template>
        </el-table-column>
        <el-table-column label="型号规格">
          <template slot-scope="scope">
            {{ scope.row.size }}
          </template>
        </el-table-column>
        <el-table-column label="包装单位">
          <template slot-scope="scope">
            {{ scope.row.packingUnit }}
          </template>
        </el-table-column>
        <el-table-column label="变更类型">
          <template slot-scope="scope">
            {{ scope.row.logTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="来源单据">
          <template slot-scope="scope">
            {{ scope.row.orderNum }}
          </template>
        </el-table-column>
        <el-table-column label="申请人">
          <template slot-scope="scope">
            {{ scope.row.operatorName }}
          </template>
        </el-table-column>
        <el-table-column label="变更前库存">
          <template slot-scope="scope">
            {{ scope.row.beforeCount }}
          </template>
        </el-table-column>
        <el-table-column label="变更数量">
          <template slot-scope="scope">
            <span v-if="scope.row.changeCount <= 0" style="color: Blue">
              {{ scope.row.changeCount }}</span
            >
            <span v-else style="color: Red"> +{{ scope.row.changeCount }}</span>
            <!-- {{ scope.row.changeCount }} -->
          </template>
        </el-table-column>
        <el-table-column label="变更后库存">
          <template slot-scope="scope">
            {{ scope.row.afterCount }}
          </template>
        </el-table-column>
        <el-table-column label="变更时间">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :total="pagination.total"
        :current-page="pagination.pageIndex"
        :page-count="pagination.total"
        @changePage="changePage"
        @sizeChange="sizeChange"
      />
    </div>
  </div>
</template>

<script>
import { GetConfigByKey } from "../../../api/System/SystemDict.js";
import { getStorageList } from "../../../api/Material/Common.js";
import { getList } from "../../../api/Material/MaterialChangeLog.js";
export default {
  name: "MaterialChangeLogList",
  components: {},
  data() {
    return {
      loading: true,
      changeCount: "",
      list: [],
      storageIdData: [],
      changeLogTypeOptions: [],
      queryForm: {
        orderNum: "",
        productNum: "",
        productName: "",
        storageId: null,
        logType: null,
        operatorName: "",
        startDate: null,
        endDate: null,
        createTimeArr: [],
        type: null,
      },
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.getList();
      // 查询字典表=>变更类型
      GetConfigByKey({ configKey: "MaterialInventory_ChangeLogType" }).then((res) => {
        if (res.data != null && res.data.length > 0 && res.data[0].value != null) {
          this.changeLogTypeOptions = JSON.parse(res.data[0].value);
        }
      });
      await this.getStorageOptions();
    },
    getStorageOptions() {
      return new Promise((resolve) => {
        getStorageList().then((res) => {
          if (res.data.dataList?.length > 0) {
            this.storageIdData = res.data.dataList.map(item => {
              return {
                ...item,
                value: item.id
              }
            });
          }
          resolve();
        });
      })
    },
    changePage(val) {
      this.pagination.pageIndex = val;
      this.getList();
    },
    sizeChange(val) {
      this.pagination.pageIndex = 1;
      this.pagination.pageSize = val;
      this.getList();
    },
    cancelForm() {
      this.$refs.queryForm.resetFields();
      this.pagination.pageIndex = 1;
      this.getList();
    },
    getList() {
      this.loading = true;
      if (this.queryForm.createTimeArr.length > 0) {
        this.queryForm.startDate = this.queryForm.createTimeArr[0];
        this.queryForm.endDate = this.queryForm.createTimeArr[1];
      } else {
        this.queryForm.startDate = null;
        this.queryForm.endDate = null;
      }
      getList(this.queryForm, this.pagination)
        .then((res) => {
          this.list = res.data.dataList ? res.data.dataList : [];
          this.pagination.total = res.data.total;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    // 导出
    exportData() {
      var list = []
      if (this.queryForm.createTimeArr.length > 0) {
        this.queryForm.startDate = this.queryForm.createTimeArr[0];
        this.queryForm.endDate = this.queryForm.createTimeArr[1];
      } else {
        this.queryForm.startDate = null;
        this.queryForm.endDate = null;
      }
      const { ...queryForm } = this.queryForm;
      getList({
        ...queryForm,
        pageIndex: 1,
        pageSize: 1000000
      }).then((res) => {
        list = res.data.dataList ? res.data.dataList : [];
        import("@/vendor/Export2Excel").then((excel) => {
          const tHeader = [
            "仓库",
            "物料编号",
            "物料名称",
            "规格型号",
            "包装单位",
            "变更类型",
            "来源单据",
            "申请人",
            "变更前数量",
            "变更数量",
            "变更后数量",
            "变更时间",
          ];
          const filterVal = [
            "storageName",
            "productNum",
            "productName",
            "size",
            "packingUnit",
            "logTypeName",
            "orderNum",
            "operatorName",
            "beforeCount",
            "changeCount",
            "afterCount",
            "createTime",
          ];
          const data = this.formatJson(filterVal, list);
          excel.export_json_to_excel({
            header: tHeader, // 表头
            data, // 数据
            filename: "出入库台账", // 导出文件名
            autoWidth: true, // 导出宽度自动
            bookType: "xlsx", // 导出后缀
          });
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
    onQuery() {
      this.pagination.pageIndex = 1;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.change-log-list {
  .el-form-item__content {
    width: calc(100% - 90px);
  }
}
</style>
